<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="分类名称" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入分类名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="分类状态" prop="status">

        <el-select v-model="queryParams.status" filterable clearable placeholder="请选择分类状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="编辑人员" prop="updateBy">
        <el-select v-model="queryParams.auditBy" filterable clearable placeholder="请选择编辑人员">
          <el-option
            v-for="item in userOptions"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" prop="publishTimeStr">
        <el-date-picker clearable
                        v-model="queryParams.publishTimeStr"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="请选择发布时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="审核人员" prop="auditBy">
        <el-select v-model="queryParams.updateBy" filterable clearable placeholder="请选择审核人员">
          <el-option
            v-for="item in userOptions"
            :key="item.userId"
            :label="item.userName"
            :value="item.userId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="修改时间" prop="updateTimeStr">
        <el-date-picker clearable
                        v-model="queryParams.updateTimeStr"
                        value-format="yyyy-MM-dd"
                        type="date"
                        placeholder="请选择修改时间">
        </el-date-picker>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['article_policy:article_policy:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['article_policy:article_policy:remove']"
        >删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="article_policyList" @selection-change="handleSelectionChange">
      <el-table-column type="selection"  align="center"/>
      <el-table-column label="序号" align="center" prop="articleId"/>
      <el-table-column label="分类名称" width="500px" align="center" prop="title"/>
      <el-table-column label="分类状态" align="center" prop="status"/>
      <el-table-column label="编辑人员" align="center" prop="auditName"/>
      <el-table-column label="发布时间" align="center" prop="publishTimeStr" />
      <el-table-column label="审核人员" align="center" prop="auditName"/>
      <el-table-column label="修改时间" align="center" prop="updateTime" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['article_policy:article_policy:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['article_policy:article_policy:remove']"
          >删除
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document-copy"
            @click="handleCopy(scope.row)"
          >复制
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改政策分类信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1500px" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="115px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"/>
        </el-form-item>
        <el-form-item label="曾用名" prop="formerName">
          <el-input v-model="form.formerName" placeholder="请输入曾用名"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="项目层级" prop="itemGrade">
              <el-select v-model="form.itemGrade" placeholder="请选择项目层级">
                <el-option
                  v-for="dict in dict.type.item_grade"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目等级" prop="itemLevel">
              <el-select v-model="form.itemLevel" placeholder="请选择项目等级">
                <el-option
                  v-for="dict in dict.type.item_level"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="项目类型" prop="itemType">
              <el-select v-model="form.itemType" placeholder="请选择项目类型">
                <el-option
                  v-for="dict in dict.type.item_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应事项" prop="correspondence">
              <el-select v-model="form.correspondence" placeholder="请选择对应事项">
                <el-option
                  v-for="dict in dict.type.correspondence"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="是否再次申报" prop="isRedeclaration">
              <el-select v-model="form.isRedeclaration" filterable placeholder="请选择是否再次申报">
                <el-option
                  v-for="item in yesOrNoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value+''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="首批年份" prop="year">
              <el-input v-model="form.year" placeholder="请输入首批年份"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支持额度(万)" prop="quota">
              <el-input style="width: 150px" v-model="form.quota1" placeholder="请输入支持额度"/>&nbsp;-
              <el-input style="width: 150px" v-model="form.quota2" placeholder="请输入支持额度"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="利好" prop="benefits">
          <el-input v-model="form.benefits" type="textarea" placeholder="请输入内容"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="分类状态" prop="status">
              <el-select v-model="form.status" filterable placeholder="请选择分类状态">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value+''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="最近一次申报截止" label-width="150px" prop="cutOffTime">
              <el-date-picker clearable
                              v-model="form.cutOffTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择申报截止时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="主管部门" prop="orgId">
              <el-cascader
                           v-model="form.orgId"
                           placeholder="请选择主管部门"
                           :options="orgOptions"
                           :props="{emitPath:false, checkStrictly: true}"
                           @change="orgChange"
                           filterable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="覆盖范围" prop="area">
              <el-cascader style="width: 600px;"
                           v-model="form.parkAreaIds"
                           placeholder="请选择覆盖范围"
                           :options="parkAreaOptions"
                           :props="{ value: 'id', checkStrictly: true}"
                           filterable></el-cascader>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->

<!--            <el-form-item label="主管类型" prop="type">-->
<!--              <el-select v-model="form.orgType" clearable placeholder="请选择主管类型">-->
<!--                <el-option-->
<!--                  v-for="dict in dict.type.org_type"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="标签" prop="tag">
              <el-cascader
                v-model="form.tags"
                placeholder="请选择标签"
                :options="tagOptions"
                collapse-tags
                clearable
                :props="{ multiple: true,emitPath: false }"
                filterable></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属行业" prop="industryIds">
              <el-cascader
                v-model="form.industryIds"
                placeholder="请选择所属行业"
                clearable
                collapse-tags
                :options="industryTreeOptions"
                :props="{ value: 'id',multiple:true,emitPath: false,}"
                filterable></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="前置政策" prop="parentId">
              <el-select v-model="form.prePolicyList" filterable multiple clearable placeholder="请选择前置政策" style="width: 600px;">
                <el-option
                  v-for="item in policyOptions"
                  :key="item.articleId"
                  :label="item.title"
                  :value="item.articleId + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="间隔时间" >
              <el-select v-model="form.prePolicyYearList" filterable multiple placeholder="请选择间隔标签">
                <el-option
                  v-for="item in intervalOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value+''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

            <el-form-item label="所属关系" prop="parentId">
              <el-select v-model="form.parentId" filterable clearable placeholder="请选择所属关系"  @change="parentChange" style="width: 600px;">
                <el-option
                  v-for="item in policyOptions"
                  :key="item.articleId"
                  :label="item.title"

                  :value="item.articleId + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关联关系" prop="connection">
              <el-select v-model="form.connectionList" clearable filterable multiple placeholder="请选择关联关系" style="width: 600px;">
                <el-option
                  v-for="item in policyOptions"
                  :key="item.articleId"
                  :label="item.title"
                  :value="item.articleId + ''"
                ></el-option>
              </el-select>
            </el-form-item>


            <el-form-item label="管理关系" prop="manageRel">
              <el-select v-model="form.manageRel" clearable filterable placeholder="请选择管理关系"   @change="manageChange" style="width: 600px;">
                <el-option
                  v-for="item in policyOptions"
                  :key="item.articleId"
                  :label="item.title"

                  :value="item.articleId + ''"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="演变关系" prop="evolutionRel">
              <el-select v-model="form.evolutionRelList" clearable filterable multiple placeholder="请选择演变关系" style="width: 600px;">
                <el-option
                  v-for="item in policyOptions"
                  :key="item.articleId"
                  :label="item.title"
                  :value="item.articleId + ''"
                ></el-option>
              </el-select>
            </el-form-item>

        <el-form-item label="关系类型" prop="relType">
          <el-radio-group v-model="form.relType">
            <el-radio label="1">被替代为</el-radio>
            <el-radio label="2">被并入至</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="支持范围" prop="supportRange">
          <el-radio-group v-model="form.supportRange">
            <el-radio label="1">部分</el-radio>
            <el-radio label="2">全部</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="申报系统名称1" prop="systemName1">
<!--              <el-input v-model="form.systemName1" placeholder="请输入申报系统名称1"/>-->
              <el-select v-model="form.webUrlList" clearable filterable multiple placeholder="请选择申报系统名称" style="width: 600px;">
                <el-option
                  v-for="item in webUrlOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="申报系统网址1" prop="systemWeb1">-->
<!--              <el-input v-model="form.systemWeb1" placeholder="请输入申报系统网址1"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="申报系统名称2" prop="systemName2">-->
<!--              <el-input v-model="form.systemName2" placeholder="请输入申报系统名称2"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="申报系统网址2" prop="systemWeb2">-->
<!--              <el-input v-model="form.systemWeb2" placeholder="请输入申报系统网址2"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="申报系统名称3" prop="systemName3">-->
<!--              <el-input v-model="form.systemName3" placeholder="请输入申报系统名称3"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="申报系统网址3" prop="systemWeb3">-->
<!--              <el-input v-model="form.systemWeb3" placeholder="请输入申报系统网址3"/>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <el-form-item label="政策简介">
          <editor v-if="open" v-model="form.intro" @contentData="contentData" :min-height="192"/>
        </el-form-item>
        <el-form-item label="是否发布" prop="isPublish">
          <el-radio-group v-model="form.isPublish">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listArticle_policy,
  getArticle_policy,
  addArticle_policy,
  updateArticle_policy,
  getAllPolicy, delArticle_policy, getWebUrlList, copyArticle_policy
} from "@/api/article/article_policy";
import {areaTree, getAllOrg, getAllOrgList, tagSelect} from "@/api/org/org";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getAllUser} from "@/api/system/user";
import {delArticle} from "@/api/article/article";
import {parkAreaTree} from "@/api/area/parkArea";
import {industryTree} from "@/api/company/industry";

export default {
  name: "Article_policy",
  dicts: ['item_grade','item_level','correspondence','item_type','org_type'],
  components: {Treeselect},
  data() {
    return {
      // 遮罩层
      loading: true,
      props: {multiple: true},
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 政策分类信息表格数据
      article_policyList: [],
      // 主管单位（树）
      orgOptions: [],
      // 主管单位（列表）
      orgListOptions: [],
      // 标签类型树
      tagTypeOptions: [],
      // 标签下拉项
      tagOptions: [],
      // 地区
      areaOptions: [],
      // 园区
      parkAreaOptions: [],
      // 行业下拉
      industryTreeOptions: [],
      // 政策下拉
      policyOptions: [],
      // 状态下拉
      statusOptions: [{value: 1, label: '有效'}, {value: 2, label: '废止'}, {value: 3, label: '暂停'}],
      // 状态下拉
      yesOrNoOptions: [{value: 1, label: '是'}, {value: 0, label: '否'}],
      // 间隔
      intervalOptions: [{value: 1, label: '间隔一'}, {value: 2, label: '间隔二'}, {value: 3, label: '间隔三'}, {value: 4, label: '间隔四'}],
      // 人员下拉
      userOptions: [],
      // 网址下拉
      webUrlOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        status: '',
        auditBy: '',
        createBy: '',
        publishTimeStr: '',
        updateTimeStr: '',
        pageNum: 1,
        pageSize: 20,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.getAllOrg();
    this.getAllOrgList();
    this.parkAreaTree();
    this.tagSelect();
    this.getAllPolicy();
    this.getAllWebUrl();
    this.getAllUser();
    this.industryTree();
  },
  methods: {
    /** 查询政策分类信息列表 */
    getList() {
      this.loading = true;
      listArticle_policy(this.queryParams).then(response => {
        this.article_policyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getAllPolicy() {
      getAllPolicy().then(response => {
        this.policyOptions = response.data;
      });
    },
    getAllWebUrl() {
      getWebUrlList().then(response => {
        this.webUrlOptions = response.data;
      });
    },
    getAllOrg() {
      getAllOrg().then(response => {
        this.orgOptions = response.data;
      });
    },
    getAllOrgList() {
      getAllOrgList().then(response => {
        this.orgListOptions = response.data;
      });
    },
    getAllUser() {
      getAllUser().then(response => {
        this.userOptions = response.data;
      });
    },
    /** 查询园区列表 */
    parkAreaTree() {
      parkAreaTree().then(response => {
        this.parkAreaOptions = response.data;
      });
    },
    /** 查询行业列表 */
    industryTree() {
      industryTree().then(response => {
        this.industryTreeOptions = response.data;
      });
    },
    tagSelect() {
      tagSelect().then(response => {
        this.tagOptions = response.data;
      });
    },
    contentData (e) {
      this.form.intro = e;
    },
    orgChange(item) {
      const obj = this.orgListOptions.filter(org => org.orgId == item);
      this.form.parkAreaIds = (obj[0].parkAreaIds);
      // this.form.address = (obj[0].address);
      // this.form.area = (obj[0].area);
      // this.form.tel = (obj[0].tel)
    },
    parentChange(item) {
      const obj = this.policyOptions.filter(temp => temp.articleId == item);
      this.form.itemGrade = (Number(obj[0].itemGrade)+1)+"";
      this.form.itemLevel = (obj[0].itemLevel);
      this.form.status = (obj[0].status);
    },
    manageChange(item) {
      const obj = this.policyOptions.filter(temp => temp.articleId == item);
      this.form.status = (obj[0].status);

    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        articleId: null,
        benefits: null,
        parentId: null,
        connection: null,
        systemWeb1: null,
        systemName1: null,
        systemWeb2: null,
        systemName2: null,
        systemWeb3: null,
        systemName3: null,
        status: null,
        cutOffTime: '',
        name: null,
        formerName: null,
        quota1: null,
        quota2: null,
        year: null,
        prePolicyId: null,
        prePolicyList: null,
        prePolicyYear: null,
        orgId: null,
        district: null,
        tags: [],
        manageRel: null,
        evolutionRel: null,
        evolutionRelList: null,
        webUrlList: null,
        connectionList: null,
        prePolicyYearList: null,
        relType: null,
        supportRange: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        content: null,
        intro: null,
        title: null,
        parkAreaIds: null,
        industryIds:null,
        isRedeclaration:null,
        itemGrade:null,
        itemLevel:null,
        correspondence:null,
        itemType:null,
        orgType: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.articleId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加政策分类信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const articleId = row.articleId
      getArticle_policy(articleId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改政策分类信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.articleId != null) {

            updateArticle_policy(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.getAllPolicy();
            });
          } else {
            addArticle_policy(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.getAllPolicy();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const articleIds = row.articleId || this.ids;
      this.$modal.confirm('是否确认删除政策分类信息编号为"' + articleIds + '"的数据项？').then(function () {
        return delArticle_policy(articleIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 复制按钮操作 */
    handleCopy(row) {
      const articleIds = row.articleId;
      this.$modal.confirm('是否复制政策分类信息编号为"' + articleIds + '"的数据项？').then(function () {
        return copyArticle_policy(articleIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("复制成功");
      }).catch(() => {
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('article/article_policy/export', {
        ...this.queryParams
      }, `article_policy_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
